<template>
  <div>
    <div class="itemm" v-for='v in list ' :key='v.id' @click='back(v)'>
      <div>姓名:{{v.name}}</div>
      <div style="margin: 10px 0">手机号:{{v.phone}}</div>
      <div>地址:{{v.desc}}</div>
        <el-button type="text" style="color:red" @click='cartDelete(v.id)'>删除</el-button>
    </div>
    <el-button type="primary" @click="add" style='margin-top:20px'>新增地址</el-button>
    <el-dialog
      title="新增地址"
      :visible.sync="dialogVisible"
      width="400px"
     
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/index";
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else {
        let reg = /^1[3-9]\d{9}$/;
        if (reg.test(value)) {
          callback();
        }
        callback(new Error("手机号格式不正确"));
      }
    };
    return {
      dialogVisible: false,
      ruleForm: {},
      list:[],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        desc: [{ required: true, message: "请输入地址", trigger: "blur" }],
        phone: [
          {
            required: true,
           
            trigger: "blur",
            validator: validatePass,
          },
        ],
      },
    };
  },
    mounted () {
        console.log(11111);
        this.getList();
    },
  methods: {
    back(v){
        if(this.$route.query.id=123){
            this.$router.push("/order?user="+JSON.stringify(v))
        }
    },
    cartDelete(id){
          api.deleteDizhi(id).then(res=>{
                      if(res.code==200){
                        this.getList()
                    }
                })
    },
    add() {
        this.ruleForm={}
      this.dialogVisible = true;
      //    api.addDizhi()
    },
  
    getList(){
api.dizhiList({userId:this.$store.state.user.id}).then(res=>{
    this.list=res.data
    console.log(111,res);
})
    },
    submitForm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.userId = this.$store.state.user.id;
          api.addDizhi(this.ruleForm).then((res) => {
            console.log(res);
            if(res.code==200){
                this.dialogVisible=false
                this.getList()
                  this.$message({
          message: '新增成功',
          type: 'success'
        });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.itemm {
  margin-top: 20px;
  border-radius: 10px;
  font-size: 20px;
  // display: flex;
  border: 1px solid red;
  padding: 10px;
  cursor: pointer;
  &:hover{
    background-color: #ddd;
  }
}
</style>
